<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --color: pink;
            --blur-1-size: clamp(400px, 60vw, 60vw);
            --blur-2-size: clamp(300px, 40vw, 40vw);
            --blur-3-size: clamp(100px, 10vw, 10vw);
            --blur-amount: clamp(40px, 5vw, 90px);
        }

        .blur {
            position: absolute;
            z-index: 1;
            border-radius: 900px;
            filter: blur(var(--blur-amount));
            background: var(--color);
        }

        .blur:nth-child(1) {
            height: var(--blur-1-size);
            width: calc(var(--blur-1-size) * 1.1);
        }

        .blur:nth-child(2) {
            filter: blur(var(--blur-amount)) hue-rotate(135deg) brightness(1.3);
            height: var(--blur-2-size);
            width: calc(var(--blur-2-size) * 0.75);
            top: 20vh;
            right: 20vh;
        }

        .blur:nth-child(3) {
            filter: blur(var(--blur-amount)) hue-rotate(-135deg);
            height: var(--blur-3-size);
            width: calc(var(--blur-3-size) * 2);
            bottom: 20vh;
            left: 20vw;
        }

        body {
            font-family: Termina, sans-serif;
        }

        section {
            padding: 5vw;
            height: 100vh;
            background: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .credit {
            position: relative;
            margin-top: 3rem;
            width: 100%;
            text-align: center;
            z-index: 2;

            a {
                color: #222;
            }
        }

        * {
            box-sizing: border-box;
        }

        h1 {
            font-weight: 800;
            font-size: clamp(2rem, 4vw, 3rem);
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
            z-index: 2;
            position: relative;
        }
    </style>
</head>
<body>
<section class="wrapper">
    <div class="blur"></div>
    <div class="blur"></div>
    <div class="blur"></div>
    <h1>微妙的径向渐变背景动画</h1>
</section>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
<script>
    console.clear();
    const randomX = random(-400, 400);
    const randomY = random(-200, 200);
    const randomDelay = random(0, 50);
    const randomTime = random(6, 12);
    const randomTime2 = random(5, 6);
    const randomAngle = random(-30, 150);

    const blurs = gsap.utils.toArray(".blur");
    blurs.forEach((blur) => {
        gsap.set(blur, {
            x: randomX(-1),
            y: randomX(1),
            rotation: randomAngle(-1)
        });

        moveX(blur, 1);
        moveY(blur, -1);
        rotate(blur, 1);
    });

    function rotate(target, direction) {
        gsap.to(target, randomTime2(), {
            rotation: randomAngle(direction),
            // delay: randomDelay(),
            ease: Sine.easeInOut,
            onComplete: rotate,
            onCompleteParams: [target, direction * -1]
        });
    }

    function moveX(target, direction) {
        gsap.to(target, randomTime(), {
            x: randomX(direction),
            ease: Sine.easeInOut,
            onComplete: moveX,
            onCompleteParams: [target, direction * -1]
        });
    }

    function moveY(target, direction) {
        gsap.to(target, randomTime(), {
            y: randomY(direction),
            ease: Sine.easeInOut,
            onComplete: moveY,
            onCompleteParams: [target, direction * -1]
        });
    }

    function random(min, max) {
        const delta = max - min;
        return (direction = 1) => (min + delta * Math.random()) * direction;
    }
</script>
</body>
</html>